<template>
    <div id="tmpl">
        <!-- 利用mui中图文表格组件实现 -->
        <!-- :autoFill='false'  加载后，loadmore将自动检查其是否
        足够高以填充其容器。如果没有，bottom-method将运行直到其容器被填满。auto-fill如果您宁愿手动处理，请关闭。为真就关闭 -->
        <mt-loadmore :autoFill='false' :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
            <div id="mui-content" class="mui-content" style="background-color:#fff">
                <ul class="mui-table-view mui-grid-view">
                    <li v-for="item in list" class="mui-table-view-cell mui-media mui-col-xs-6">
                        <router-link v-bind="{to:'/goods/goodsinfo/'+item.id}">
                            <img class="mui-media-object" :src="item.img_url">
                            <div class="mui-media-body" v-text="item.title"></div>
                            <div class="desc">
                                <p>
                                    <span>￥{{item.sell_price}}</span>
                                    <s>￥{{item.market_price}}</s>
                                </p>
                                <p>
                                    <h6 class="left">热卖中</h6>
                                    <h6 class="right">剩余{{item.stock_quantity}}件</h6>
                                </p>
                            </div>
                        </router-link>
                    </li>
                </ul>    
            </div>
        </mt-loadmore>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
	import common from '../../kits/common.js';
    export default{
        data(){
            return {
                list: [],
                allLoaded: false,  //为假， 有数据就能上拉加载更多数据
                pageindex: 1
            }
        },
        created() {
            this.getlist();
        },
        methods:{
            // 下拉时触发 请求最新数据
            loadTop() {
                console.log('下拉');
                this.pageindex = 1;
                this.getlist();
            },
            //上拉时触发 加载更多数据
            loadBottom() {
                console.log('上拉')
                this.pageindex++;
                this.getlist();
            },
            getlist() {
                // 获取到商品列表数据
                var url = common.apidomain + '/api/getgoods?pageindex=' + this.pageindex;
                this.$http.get(url).then(function(res) {
                    if (res.body.status != 0) {
                        Toast(res.body.message);
                        return;
                    }
                    if (this.pageindex == 1) {
                        // 重置下拉状态
                        this.$refs.loadmore.onTopLoaded();
                        // 直接赋值第一页的数据
                        this.list = res.body.message;
                    } else {
                        // 重置上拉状态
                        if (res.body.message.length == 0) {
                            //:bottom-all-loaded="allLoaded"   allLoaded为真上拉无法运行
                            this.allLoaded = true;  //没有数据，上拉（bottom-method）将无法运行了
                        }
                        this.$refs.loadmore.onBottomLoaded();
                        this.list = this.list.concat(res.body.message);
                    }
                });
            }
        }
    }
</script>

<style scoped>
    #mui-content li{
        border: 1px solid rgba(0,0,0,0.4);
        margin-left: 4px;
        padding-left: 0px;
        -webkit-box-shadow:0 0 4px #000;
        -moz-box-shadow:0 0 4px #000;
        box-shadow:0 0 4px #000;
    }
    #mui-content .mui-media-body{
        color: #0094ff;
    }
    #mui-content .desc{
        height: 60px;
        background-color: rgba(0,0,0,0.1);
        margin-top:5px;
        padding: 5px;
        text-align: left;
    }
    #mui-content .desc span{
        color: red;
        margin-right: 15px;
    }
    #mui-content a{
        padding-left: 0px;
        margin-left: 0px;
    }
    #mui-content .desc .right{
        position: absolute;
        right:10px;
        bottom:0px;
    }
    #mui-content .desc .left{
        position: absolute;
        left:10px;
        bottom:0px;
    }
</style>

